<!--**
 * 2007-2020 PrestaShop SA and Contributors
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2020 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *-->
<template>
  <div class="col-sm-3">
    <div class="card p-3">
      <PSTree
        ref="domainTree"
        :model="domainsTree"
        class-name="translationTree"
        :translations="translations"
        :current-item="currentItem"
        v-if="treeReady"
      />
      <PSSpinner v-else />
    </div>
  </div>
</template>

<script>
  import PSTree from '@app/widgets/ps-tree/ps-tree';
  import PSSpinner from '@app/widgets/ps-spinner';
  import {EventBus} from '@app/utils/event-bus';

  export default {
    props: {
      modal: {
        type: Object,
        required: false,
        default: () => ({}),
      },
      principal: {
        type: Object,
        required: false,
        default: () => ({}),
      },
    },
    computed: {
      treeReady() {
        return !this.$store.state.sidebarLoading;
      },
      currentItem() {
        if (this.$store.getters.currentDomain === '' || typeof this.$store.getters.currentDomain === 'undefined') {
          if (this.domainsTree.length) {
            const domain = this.getFirstDomainToDisplay(this.domainsTree);
            EventBus.$emit('reduce');
            this.$store.dispatch('updateCurrentDomain', domain);

            if (domain !== '') {
              this.$store.dispatch('getCatalog', {url: domain.dataValue});
              EventBus.$emit('setCurrentElement', domain.full_name);
              return domain.full_name;
            }

            this.$store.dispatch('updatePrincipalLoading', false);
            return '';
          }
        }

        return this.$store.getters.currentDomain;
      },
      domainsTree() {
        return this.$store.getters.domainsTree;
      },
      translations() {
        return {
          expand: this.trans('sidebar_expand'),
          reduce: this.trans('sidebar_collapse'),
          extra: this.trans('label_missing'),
          extra_singular: this.trans('label_missing_singular'),
        };
      },
    },
    mounted() {
      this.$store.dispatch('getDomainsTree', {
        store: this.$store,
      });
      EventBus.$on('lastTreeItemClick', (el) => {
        if (this.edited()) {
          this.modal.showModal();
          this.modal.$once('save', () => {
            this.principal.saveTranslations();
            this.itemClick(el);
          });
          this.modal.$once('leave', () => {
            this.itemClick(el);
          });
        } else {
          this.itemClick(el);
        }
      });
    },
    methods: {
      /**
       * Update the domain, retrieve the translations catalog, set the page to 1
       * and reset the modified translations
       * @param {object} el - Domain to set
       */
      itemClick: function itemClick(el) {
        this.$store.dispatch('updateCurrentDomain', el.item);
        this.$store.dispatch('getCatalog', {url: el.item.dataValue});
        this.$store.dispatch('updatePageIndex', 1);
        this.$store.state.modifiedTranslations = [];
      },
      getFirstDomainToDisplay: function getFirstDomainToDisplay(tree) {
        const keys = Object.keys(tree);
        let toDisplay = '';

        for (let i = 0; i < tree.length; i += 1) {
          if (!tree[keys[i]].disable) {
            if (tree[keys[i]].children && tree[keys[i]].children.length > 0) {
              return getFirstDomainToDisplay(tree[keys[i]].children);
            }

            toDisplay = tree[keys[i]];
            break;
          }
        }

        return toDisplay;
      },
      /**
       * Check if some translations have been edited
       * @returns {boolean}
       */
      edited: function edited() {
        return this.$store.state.modifiedTranslations.length > 0;
      },
    },
    components: {
      PSTree,
      PSSpinner,
    },
  };
</script>

<style lang="scss" type="text/scss">
  @import '~@scss/config/_settings.scss';

  .translationTree {
    .tree-name {
      margin-bottom: .9375rem;

      &.active {
        font-weight: bold;
      }

      &.extra {
        color: $danger;
      }
    }
    .tree-extra-label {
      color: $danger;
      text-transform: uppercase;
      font-size: .65rem;
      margin-left: auto;
    }
    .tree-extra-label-mini {
      background-color: $danger;
      color: #ffffff;
      padding: 0 0.5rem;
      border-radius: 0.75rem;
      display: inline-block;
      font-size: .75rem;
      height: 1.5rem;
      margin-left: auto;
    }
    .tree-label {
      &:hover {
        color: $primary;
      }
    }
  }
  .ps-loader {
    $loader-white-height: 20px;
    $loader-line-height: 16px;
    .animated-background {
      height: 144px!important;
      animation-duration: 2s!important;
    }
    .background-masker {
      &.header-left {
        left: 0;
        top: $loader-line-height;
        height: 108px;
        width: 20px;
      }
      &.content-top {
        left: 0;
        top: $loader-line-height;
        height: $loader-white-height;
      }
      &.content-first-end {
        left: 0;
        top: $loader-line-height*2+$loader-white-height;
        height: $loader-white-height;
      }
      &.content-second-end {
        left: 0;
        top: $loader-line-height*3+$loader-white-height*2;
        height: $loader-white-height;
      }
      &.content-third-end {
        left: 0;
        top: $loader-line-height*4+$loader-white-height*3;
        height: $loader-white-height;
      }
    }
  }
</style>
